import styled from '@emotion/styled';
import { Form } from 'antd';
import { t } from 'i18next';
import React from 'react';

const SelectedDesc = styled.div`
	padding: 10px;
	box-sizing: border-box;
	background-color: #f6f6f6;
	border-radius: 4px;
	min-height: 40px;
`;

interface GroupSkillRuleProps {
	label?: string;
	list: { id: number; name: string }[];
}

const GroupSkillRule = (props: GroupSkillRuleProps) => {
	const { list = [], label = t('group-skill-rule') } = props;
	return (
		<Form.Item label={label} className="form-input-item">
			<SelectedDesc>{list.map(item => item.name).join('、')}</SelectedDesc>
		</Form.Item>
	);
};

export default GroupSkillRule;
